<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/util.js"></script>
    <style>

        .nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
        }

        .container {
            padding-top: 80px;
            height: auto;
        }

        .container-right {
            width: auto;
        }

        .blog-pagnation-wrapper {
            height: 40px;
            margin: 16px 0;
            text-align: center;
        }

        .blog-pagnation-item {
            display: inline-block;
            padding: 8px;
            border: 1px solid #d0d0d5;
            color: #333;
        }

        .blog-pagnation-item:hover {
            background: #4e4eeb;
            color: #fff;
        }

        .blog-pagnation-item.actvie {
            background: #4e4eeb;
            color: #fff;
        }

    </style>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/logo.jpg" alt="">
    <span class="title">我的博客系统</span>
    <!-- 用来占据中间位置 -->
    <span class="spacer"></span>
    <a href="myblog_list.html">个人中心</a>
    <!-- <a href="#">注销</a> -->
</div>
<!-- 版心 -->
<div class="container">
    <!-- 右侧内容详情 -->
    <div class="container-right" style="width: 100%;">
        <!-- 每一篇博客包含标题, 摘要, 时间 -->
        <div id="listDiv">

        </div>
        <!--<div class="blog" >
            <div class="title">我的第一篇博客</div>
            <div class="date">2021-06-02</div>
            <div class="desc">正文</div>
            <a href="blog_content.html?id=1" class="detail">查看全文 &gt;&gt;</a>
        </div>
        <div class="blog">
            <div class="title">我的第一篇博客</div>
            <div class="date">2021-06-02</div>
            <div class="desc">正文</div>
            <a href="blog_content.html?id=1" class="detail">查看全文 &gt;&gt;</a>
        </div>-->

        <hr>
        <div class="blog-pagnation-wrapper">
            <button class="blog-pagnation-item" onclick="firstPage()">首页</button>
            <button class="blog-pagnation-item" onclick="prevPage()">上一页</button>
            <button class="blog-pagnation-item" onclick="nextPage()">下一页</button>
            <button class="blog-pagnation-item" onclick="lastPage()">末页</button>
        </div>
    </div>
</div>

<script>
    // 分页功能的默认参数值
    var psize = 2; // 每页显示的文章数量
    var pindex = 1; // 当前页码

    // 初始化分页功能的的参数，从 url 中获取 pindex 和 psize
    function initPageParam() {
        var pageindex = getUrlParam("pindex");
        if (pageindex != "") {
            pindex = pageindex;
        }
        var pagesize = getUrlParam("psize");
        if (pagesize != "") {
            psize = pagesize;
        }
    }

    initPageParam();

    // 查询分页数据
    function initList() {
        jQuery.ajax({
            url: "/art/list",
            type: "GET",
            data: {
                "psize": psize,
                "pindex": pindex
            },
            success: function (body) {
                let listDiv = document.querySelector("#listDiv");
                if (body.code == 200 && body.data != null) {
                    // 遍历 body 中的 data
                    for (let blog of body.data) {
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';
                        // 创建博客标题
                        let titleDiv = document.createElement('div');
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        blogDiv.appendChild(titleDiv);
                        // 创建发布日期
                        let dateDiv = document.createElement('div');
                        dateDiv.className = 'date';
                        dateDiv.innerHTML = formatDate(blog.createtime);
                        blogDiv.appendChild(dateDiv);
                        // 创建摘要
                        let descDiv = document.createElement('div');
                        descDiv.className = 'desc';
                        descDiv.innerHTML = subContent(blog.content);
                        blogDiv.appendChild(descDiv);

                        // 创建查看全文按钮
                        let a = document.createElement('a');
                        a.className = 'listdetail';
                        a.innerHTML = '查看详情 >>';
                        a.href = 'blog_content.html?aid=' + blog.aid;
                        blogDiv.appendChild(a);

                        // 把 blogDiv 加入外层元素
                        listDiv.appendChild(blogDiv);
                    }
                }
            }
        });
    }

    initList();

    // 首页
    function firstPage() {
        location.href = "blog_list.html";
    }

    // 上一页
    function prevPage() {
        if (pindex <= 1) {
            alert("当前已经是第一页了!");
            return false;
        }
        pindex = parseInt(pindex) - 1;
        location.href = "blog_list.html?pindex=" + pindex + "&psize=" + psize;
    }

    var totalpage = 1; // 总共多少页

    // 查询总共有多少页的数据
    function getTotalPage() {
        jQuery.ajax({
            url: "/art/totalpage",
            type: "get",
            data: {
                "psize": psize
            },
            success: function (body) {
                if (body.code == 200 && body.data != null) {
                    totalpage = body.data;
                }
            }
        });
    }

    getTotalPage();

    // 下一页
    function nextPage() {
        if (parseInt(pindex) + 1 > totalpage) {
            alert("当前已经是最后一页了!");
            return false;
        }
        location.href = "blog_list.html?pindex=" + (parseInt(pindex) + 1) + "&psize=" + psize;
    }

    // 末页
    function lastPage() {
        pindex = totalpage;
        location.href = "blog_list.html?pindex=" + pindex + "&psize=" + psize;
    }
</script>
</body>
</html>